
<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { useUserStore } from '../stores/index'
import { useMenuStore } from '../stores/menu'

const router = useRouter()
const currentRoute = computed(() => router.currentRoute.value.path)
const userStore = useUserStore()
const menuStore = useMenuStore()
const filteredMenus = computed(() => menuStore.allMenus.filter(menu => menu.hidden !== true))

const handleMenuClick = (index) => {
  console.log(router ,index);
  
  
  router.push(index)
}

// 处理登出
const handleLogout = () => {
  // 使用user store清除用户信息
  userStore.clearUserInfo()
  
  // 显示退出成功消息
  ElMessage.success('退出登录成功')
  
  // 重定向到登录页面
  router.push('/login')
}
</script>

<template>
  <ElContainer class="min-h-screen">
    <ElHeader class="bg-primary text-white flex items-center justify-between px-6">
        <div class="text-xl font-bold">SPZX Admin</div>
        <div class="flex items-center gap-4">
          <span>欢迎管理员</span>
          <div class="w-8 h-8 bg-white rounded-full flex items-center justify-center text-primary">
            A
          </div>
          <ElButton type="text" text-color="white" @click="handleLogout">
            退出登录
          </ElButton>
        </div>
      </ElHeader>
    <ElContainer class="flex">
      <ElAside width="200px" class="bg-white border-r">
        <ElMenu
          active-text-color="#409eff"
          background-color="#ffffff"
          class="h-100%"
          text-color="#303133"
          router
          :default-active="currentRoute"
          mode="vertical"
        >
          <template v-for="menu in filteredMenus" :key="menu.id || menu.title">
            <!-- 有子菜单的菜单项 -->
            <ElSubMenu v-if="menu.children && menu.children.length > 0" :index="menu.id || menu.title">
              <template #title>
                <span v-if="menu.icon" class="mr-2">{{ menu.icon }}</span>
                <span>{{ menu.title }}</span>
              </template>
              <template v-for="subMenu in menu.children" :key="subMenu.id || subMenu.title">
    
                <ElMenuItem :index="subMenu.path" @click="handleMenuClick(subMenu.route)">
                  <template v-if="subMenu.icon" #icon>
                    <span class="text-lg">{{ subMenu.icon }}</span>
                  </template>
               
                  {{ subMenu.title }}
                </ElMenuItem>
              </template>
            </ElSubMenu>
            <!-- 没有子菜单的菜单项 -->
            <ElMenuItem v-else :index="menu.path" @click="handleMenuClick(menu.route)">
            
              <template v-if="menu.icon" #icon>
                <span class="text-lg">{{ menu.icon }}</span>
              </template>
              {{ menu.title }}
            </ElMenuItem>
          </template>
        </ElMenu>
      </ElAside>
      
      <ElMain class="bg-gray-50">
        <router-view />
      </ElMain>
    </ElContainer>
  </ElContainer>
</template>

<style scoped>
.el-header {
  padding: 0;
  height: 60px !important;
}

.el-main {
  padding: 20px;
  overflow: auto;
}

.el-menu {
  border-right: none !important;
}

.el-menu-item {
  height: 60px !important;
  line-height: 60px !important;
}
</style>